<template>
  <div class="total">
    <!-- 模拟模态框 -->
    <div class="model" v-if="isClick === true">
      <div class="form">
        <el-form
          :model="drug_name"
          :rules="rules"
          ref="drug_name"
          label-width="100px"
          class="demo-drug_name rule"
        >
          <el-row>
            <el-col :span="7">
              <el-form-item label="药品名称 :" prop="name">
                <el-input v-model="drug_name.name1"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="别名 :" prop="name">
                <el-input v-model="drug_name.name2"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="7">
              <el-form-item label="批准文号 : " prop="name">
                <el-input v-model="drug_name.name3"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <!-- <el-col :span="7">
              <el-form-item label="生产厂家 : " prop="name">
                <el-input v-model="drug_name.name4"></el-input>
              </el-form-item>
            </el-col>-->
            <el-col :span="7">
              <el-form-item label="录入人 : " prop="name">
                <el-input v-model="drug_name.name5"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="统一编码 : " prop="name">
                <el-input v-model="drug_name.name6"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="bianhao1">
              <el-form-item label="药品编号: " prop="name" class="bianhao">
                <el-input v-model="drug_name.bianhao"></el-input>
              </el-form-item>
            </el-col>

            <!-- <el-col :span="8" class="jixing">
              <el-form-item label="药品剂型 : " prop="name">
                <el-input v-model="drug_name.jixing"></el-input>
              </el-form-item>
            </el-col>-->
            <el-col :span="8" class="guige">
              <el-form-item label="规格数量 : " prop="name">
                <el-input v-model="drug_name.guige"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="jiage1">
              <el-form-item label="价格 : " prop="name">
                <el-input v-model="drug_name.jiage"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="7" class="changjia">
              <el-form-item label="生产厂家 : ">
                <el-select v-model="drug_name.changjia" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in changjiajs"
                    :key="index"
                    :label="item.pharmaceutical_manufacturer_name"
                    :value="item.pharmaceutical_manufacturer_name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7" class="leixing1">
              <el-form-item label="用药类型 : ">
                <el-select v-model="drug_name.leixing" placeholder="请选择">
                  <!-- <el-option
                    v-for="(item,index) in leixingjs"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>-->
                  <el-option label="处方" value="0"></el-option>
                  <el-option label="非处方" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="药品分类 : ">
                <el-select v-model="drug_name.fenlei" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in fenleijs"
                    :key="index"
                    :label="item.drug_classification_control_name"
                    :value="item.drug_classification_control_id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="药品剂型 : ">
                <el-select v-model="drug_name.jixing" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in jixingjs"
                    :key="index"
                    :label="item.pharmaceutical_dosage_forms_name"
                    :value="item.pharmaceutical_dosage_forms_id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 如果想要必填可添加required属性 -->
          <el-form-item label="生产日期 : ">
            <el-col :span="5">
              <el-form-item>
                <el-date-picker
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期"
                  v-model="drug_name.date3"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="失效日期 : " class="shixiao">
            <el-col :span="5">
              <el-form-item>
                <el-date-picker
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期"
                  v-model="drug_name.date4"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>

          <el-form-item label="备注 : ">
            <el-input type="textarea" v-model="drug_name.desc"></el-input>
          </el-form-item>
          <!-- <el-form-item label="即时配送" prop="delivery">
            <el-switch v-model="ruleForm.delivery"></el-switch>
          </el-form-item>-->
          <el-form-item>
            <el-button
              type="primary"
              @click="submitForm('drug_name')"
              icon="el-icon-plus"
              class="btnbtn2"
              >添加</el-button
            >
            <el-button @click="isClick=false" class="btnbtn1">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 点击进来的页面 -->
    <div>
      <div><strong>药品进销存 /</strong> 药品信息维护</div>
      <div class="title">药品信息维护</div>
      <!-- 第一部分 -->
      <div class="section1">
        <div class="section1-1">
          <i class="el-icon-search" @click="sousuo"></i>
          <input
            type="text"
            placeholder="请输入药品名称"
            v-model="filterText"
            class="input1"
          />
        </div>

        <div class="section1-2">
          <el-select
            v-model="drug_name.fenlei"
            placeholder="药品分类"
            @change="changeClick"
          >
            <el-option
              v-for="(item, index) in fenleijs"
              :key="index"
              :label="item.drug_classification_control_name"
              :value="item.drug_classification_control_id"
            ></el-option>
          </el-select>
        </div>
        <div class="section1-3">
          <button class="btn btn2" @click="muban">导入药品模板</button>
          <button class="btn">导出</button>
          <button class="btn btn1">批量删除</button>
          <button class="btn btn1" @click="addDrugClick()">添加药品</button>
        </div>
      </div>
      <!-- 第二部分 -->
      <div class="section2">
        <el-table
          ref="multipleTable"
          :data="newList"
          tooltip-effect="dark"
          style="font-size: 13px"
           border
          
          @selection-change="handleSelectionChange"
          :row-style="{ height: '60px' }"
          :header-cell-style="{ color: '', borderBottom: '2px solid #39b9ae'}"
        >
          <el-table-column align="center" type="selection" width="55"></el-table-column>
          <el-table-column align="center"
            prop="drug_name"
            label="药品名称"
          ></el-table-column>
          <el-table-column align="center"
            prop="drugClassificationControl.drug_classification_control_name"
            label="药品分类"
            width="80"
          ></el-table-column>
          <el-table-column align="center"
            prop="drug_approval_certificate"
            label="批准文号"
            
          ></el-table-column>
          <el-table-column align="center"
            prop="drug_serial_number"
            label="药品编号"
            
          ></el-table-column>
          <el-table-column align="center"
            prop="pharmaceutical_manufacturer"
            label="生产厂家"
            
          ></el-table-column>
          <el-table-column align="center"
            prop="drug_creator"
            label="录入人"
            
          ></el-table-column>
          <el-table-column align="center"
            prop="drug_creator_time"
            label="录入时间"
            width="170"
          ></el-table-column>
          <el-table-column align="center"
            prop="drug_price"
            label="价格"
            
          ></el-table-column>
          <el-table-column align="center" label="操作" width="60">
            <template slot-scope="scope">
              <el-dropdown>
                <span class="el-dropdown-link">
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="modify(scope.row, 0)"
                    >查看详情</el-dropdown-item
                  >
                  <el-dropdown-item @click.native="modify(scope.row, 0)"
                    >编辑</el-dropdown-item
                  >
                  <el-dropdown-item @click.native="modify(scope.row, 1)"
                    >复制</el-dropdown-item
                  >
                  <el-dropdown-item @click.native="modify(scope.row, 2)">
                    <el-button type="text" @click="open"
                      >删除</el-button
                    ></el-dropdown-item
                  >
                  <el-dropdown-item @click.native="modify(scope.row, 3)"
                    >禁用</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog
          title="编辑药品信息"
          :visible.sync="dialogFormVisible"
          width="1100px"
        >
          <!-- 模态框 -->
          <div class="form">
            <el-form
              :model="drug_name"
              :rules="rules"
              ref="drug_name"
              label-width="100px"
              class="demo-drug_name rule"
            >
              <el-row>
                <el-col :span="7">
                  <el-form-item label="药品名称 :" prop="name">
                    <el-input v-model="chooseList.drug_name"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="7" class="bieming">
                  <el-form-item label="别名 :" prop="name">
                    <el-input v-model="chooseList.drug_another_name"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="7" class="pzwenhao">
                  <el-form-item label="批准文号 : " prop="name">
                    <el-input
                      v-model="chooseList.drug_approval_certificate"
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="7">
                  <el-form-item label="录入人 : " prop="name">
                    <el-input v-model="chooseList.drug_creator"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="tybianma">
                  <el-form-item label="统一编码 : " prop="name">
                    <el-input
                      v-model="chooseList.drug_Social_security_code"
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="ypbianhao">
                  <el-form-item label="药品编号: " prop="name" class="bianhao">
                    <el-input
                      v-model="chooseList.drug_serial_number"
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="guige">
                  <el-form-item label="规格数量 : " prop="name">
                    <el-input v-model="chooseList.drug_quantity"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="jiage">
                  <el-form-item label="价格 : " prop="name">
                    <el-input v-model="chooseList.drug_price"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="7" class="changjia">
                  <el-form-item label="生产厂家 : ">
                    <el-select
                      v-model="chooseList.pharmaceutical_manufacturer"
                    >

                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="7" class="leixing">
                  <el-form-item label="用药类型 : ">
                    <el-select
                      v-model="chooseList.drug_otc"
                    >
                      
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="7" class="fenlei">
                  <el-form-item label="药品分类 : ">
                    <el-select
                      v-model="drug_classification_control_name"
                    >
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="药品剂型 : ">
                    <el-select
                      v-model="pharmaceutical_dosage_forms_name"
                    >
                    
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <!-- 如果想要必填可添加required属性 -->
              <el-form-item label="生产日期 : ">
                <el-col :span="5">
                  <el-form-item>
                    <el-date-picker
                      format="yyyy 年 MM 月 dd 日"
                      value-format="yyyy-MM-dd"
                      type="date"
                      placeholder="选择日期"
                      v-model="chooseList.drug_Birth_date"
                      style="width: 100%"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-form-item>
              <el-form-item label="失效日期 : " class="shixiao">
                <el-col :span="5">
                  <el-form-item>
                    <el-date-picker
                      format="yyyy 年 MM 月 dd 日"
                      value-format="yyyy-MM-dd"
                      type="date"
                      placeholder="选择日期"
                      v-model="chooseList.drug_finally_time"
                      style="width: 100%"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-form-item>

          
              
            </el-form>
            
            <!-- </div> -->
             
          </div>
          <span slot="footer" class="dialog-footer">
    
    <el-button type="primary" @click="edit">确 定</el-button>
  </span>
        </el-dialog>
        <!-- 分页-->
        <div class="paging">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="pageNum"
            layout="prev, pager, next, jumper"
            :total="drugList"
          ></el-pagination>
        </div>
      </div>
    </div>
    <!-- 上传文件对话框 -->
    <div >
      <el-dialog
          title="上传Excel文件"
          :visible.sync="uploadDialog"
          width="27%"
          >
           <template>
            <div>
              <el-upload drag
                  :limit=limitNum
                  :auto-upload="false"
                  accept=".xlsx"
                  :action="UploadUrl()"
                  :before-upload="beforeUploadFile"
                  :on-change="fileChange"
                  :on-exceed="exceedFile"
                  :on-success="handleSuccess"
                  :on-error="handleError"
                  :file-list="fileList">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传xlsx文件，且不超过10M</div>
              </el-upload>
            <br/>
            <div style="margin-left:56%">
              <el-button size="small" type="primary" @click="uploadFile">立即上传</el-button>
              <el-button size="small">取消</el-button>
            </div>
            </div>
        </template>
        </el-dialog>

        
    </div>
    <!-- 上传文件 -->
  
  </div>
</template>
<script>
import axios from 'axios';
import http from '../API';
export default {
  data() {
    return {
      dialogFormVisible: false,
      rowid: '',
      index1: 0,
      drug_classification_control_name:"",

      filterText: '',
      fenleijs: {},
      leixingjs: [],
      jixingjs: [],
      changjiajs: {},
      isClick: false,
      pageNum: 6,
      nowPage: 0,
      drugList: 0,
      newList: [],
      sclist:[],
      value1: [],
      value2: [],
    pharmaceutical_dosage_forms_name:'',
      uploadDialog:false,
      //下拉框数据
      options1: [ ],
      options2: [],
      // 表格数据
      multipleSelection: [],
      currentPage: 1,
      // 模态框的数据
      drug_name: {
        name1: '',
        name2: '',
        name3: '',
        changjia: '',
        name5: '',
        name6: '',
        jiage: '',
        bianhao: '',
        leixing: '',
        region2: '',
        guige: '',
        fenlei: '',
        jixing: '',
        date1: '',
        date2: '',
        date3: '',
        date4: '',
        delivery: false,
        desc: '',

      },
      rules: {
        name1: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
        // region: [
        //   { required: true, message: '请选择活动区域', trigger: 'change' },
        // ],
        date1: [
          {
            type: 'date',
            required: true,
            message: '请选择日期',
            trigger: 'change',
          },
        ],
        date2: [
          {
            type: 'date',
            required: true,
            message: '请选择时间',
            trigger: 'change',
          },
        ],
        // desc: [{ required: true, message: '请填写备注', trigger: 'blur' }],
      },
      chooseList: {},
      limitNum: 1,  // 上传excell时，同时允许上传的最大数
      fileList: [],   // excel文件列表
    };
  },
  // methods封装请求方法
  methods: {
    findDrug(){
        axios
          .get('/api/drug/findAllDrugs', {
              params: {
                drug_name: this._data.filterText,
                drug_classification_control_id: '',
                pageIndex: this._data.index1,
                pageCount: 6,
              },
          })
          .then((r) => {
              this.newList = r.data.data;
              this.drugList = r.data.count;
          });
      },
    // 修改
    edit() {
      this.dialogFormVisible = false;
      axios
        .post('/api/drug/updateDrug/', this._data.chooseList)
        .then((r) => {
        });
    },
    bianji(id) {
      this.dialogFormVisible = true;
      this.drug_name = id.drug_name.name1;
    },
    
    // 删除的弹窗
    open() {
      this.$confirm('确定删除该文件吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          axios
            .post(
              '/api/drug/deleteDrugById/' + this._data.rowid
            )
            .then((r) => {
              if (r.data.code === 200) {
                this._data.newList = r.data.data;
                this.$message({
                  type: 'success',
                  message: '删除成功!',
                });
                this.findDrug();
              }
            });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
    },
    changeClick(e) {

    },
    // 搜索
    sousuo() {
      this.findDrug();
    },

    //模态框的方法
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {

          let token = sessionStorage.getItem('token');
          axios
            .post(
              '/api/drug/insertDrug',
              {
                drug_name: this.drug_name.name1,
                drug_another_name: this.drug_name.name2,
                drug_serial_number: this.drug_name.bianhao,
                drug_otc: this.drug_name.leixing,
                // drug_classification_control_id: this.drug_name.fenlei,
                // pharmaceutical_dosage_forms_id: this.drug_name.jixing,
                pharmaceutical_manufacturer: this.drug_name.changjia,
                drug_quantity: this.drug_name.guige,
                drug_approval_certificate: this.drug_name.name3,
                drug_Social_security_code: this.drug_name.name6,
                drug_price: this.drug_name.jiage,
                drug_remarks: this.drug_name.desc,
                drug_Birth_date: this.drug_name.date3,
                drug_expiration_time: this.drug_name.date4,
                drug_state: '0',
                drugClassificationControl:{
                  drug_classification_control_id:this.drug_name.fenlei
                },
              }
              // {
              //   headers: {
              //     'content-type': 'application/json',
              //     userToken: token,
              //   },
              // }
            )
            .then((r) => {
                console.log("数据",r);
                if(r.data.code===200){
                  this.message.warning("添加成功")
                  this.findDrug();
                }
            })
            .catch((r) => {

            });

          this.isClick = false;

        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    // 点击添加药品触发
    addDrugClick() {
      this.isClick = true;
    },
    // handleCommand(command) {
    //   this.$message('click on item ' + command);
    // },

    // 点击下拉菜单触发
    // row当前行对象
    // index用来判断点的是删除或者编辑
    modify(row, index) {
      // this.$refs.modifyinfo.open(row);
      //返回当前对象
      if (index === 0) {
        console.log("当前行",row);
        this.dialogFormVisible = true;
        this._data.chooseList = row;
        this.drug_classification_control_name=row.drugClassificationControl.drug_classification_control_name;
        this.pharmaceutical_dosage_forms_name=row.pharmaceuticalDosageForms.pharmaceutical_dosage_forms_name;
      } else if (index === 1) {
      } else if (index === 2) {
        this._data.rowid = row.id;
        // axios
        //   .post('/api/drug/deleteDrugById/' + row.id)
        //   .then((r) => {


        //   });
      } else if (index === 3) {
      }
    },

    // 获取每一页的数据
    // getPage(page) {
    //   this.newList = this.drugList.slice(
    //     this.pageNum * (page - 1),
    //     this.pageNum * page
    //   );
    // },
    
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

    // 当页数变化时触发
    handleSelectionChange(val) {
      this.multipleSelection = val;

    },
    // handleSizeChange(val) {

    //   this.pageNum = val;
    // },

    // 当前页变化时触发
    handleCurrentChange(val) {
      // this.getPage(val);


      this._data.index1 = parseInt(val);
      // let num=parseInt(val);
      this.findDrug();
    },
  
    muban(){
      this.uploadDialog=true;
    },

    // 上传文件
    // 文件超出个数限制时的钩子
      exceedFile(files, fileList) {
        this.$message.warning(`只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`);
      },
      // 文件状态改变时的钩子
      fileChange(file, fileList) {
        console.log(file.raw);
        this.fileList.push(file.raw) ;
        console.log(this.fileList);
      },
    // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
      beforeUploadFile(file) {
        console.log("ceshishuju");
        console.log('before upload');
        console.log(file);
        let extension = file.name.substring(file.name.lastIndexOf('.')+1);
        let size = file.size / 1024 / 1024;
        if(extension !== 'xlsx') {
          this.message.warning('只能上传后缀是.xlsx的文件');
        }
        if(size > 10) {
          this.message.warning('文件大小不得超过10M');
        }
      },

       // 文件上传成功时的钩子
      handleSuccess(res, file, fileList) {
        this.message.success('文件上传成功');
      },
       // 文件上传失败时的钩子
      handleError(err, file, fileList) {
        this.message.error('文件上传失败');
      },
      UploadUrl:function(){
       // 因为action参数是必填项，我们使用二次确认进行文件上传时，直接填上传文件的url会因为没有参数导致api报404，所以这里将action设置为一个返回为空的方法就行，避免抛错
        return ""
      },
      uploadFile() {
        if (this.fileList.length === 0){
          this.message.warning('请上传文件');
        } else {
          let form = new FormData();
          form.append('file', this.fileList[0]);
          axios({
            method:"post",
            url: "/api/drug/upload",
            headers:{
              'Content-type':'multipart/form-data'
            },
            data:form
          }).then(
            res=>{
                console.log("数据",res);
                 if(res.data.code===200){
                    this.uploadDialog=false;
                    this.findDrug();
                 }else{
                    this.message.warning("上传失败，请重试......");
                 }
            },err =>{
            });
        }
      },
  },

    
  

  // 页面加载去请求后台接口 拿到下拉框等数据
  mounted() {
    // 生产厂家
    axios
      .post('/api/pharmaceuticalmanufacturer/findDrugType', {})
      .then((r) => {
        this.changjiajs = r.data.data;
        // 打印拿到的细化后的要遍历的几条数据
      });
    // 药品分类
    axios
      .post('/api/drugclassificationcontrol/findDrugType', {})
      .then((r) => {
       
        this.fenleijs = r.data.data;
        // 打印拿到的细化后的要遍历的几条数据
      });

    //    axios.post('/api/drugclassificationcontrol/findDrugType').then((r) => {

    // });
    // 药品剂型
    axios
      .post('/api/Pharmaceuticaldosageforms/findDrugType', {})
      .then((r) => {

        this.jixingjs = r.data.data;
        // 打印拿到的细化后的要遍历的几条数据
  
  

        // this.jixingjs=JSON.parse(JSON.stringify(r.data.data.Array));
      });

    //  获取到的总数据分页
    axios.get('/api/drug/findAllDrugs', {}).then((r) => {
      console.log("药品信息",r);
      this.drugList = r.data.count;
      this.newList = r.data.data;
      //   this.drugList=JSON.parse(JSON.stringify(r.data.staffList));
      // this.getPage(1);
    });
  },
};
</script>
<style scoped>
.line {
  width: 10px;
}
.form {
  width: 98%;
  margin: auto;
  margin-top: 20px;
}
.model {
  background-color: white;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 100;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}

/* .el-pagination >>> .el-pager {
  width: 10px;
} */
.el-pagination >>> .el-pagination__jump {
  font-size: 17px;
}
.el-pagination >>> .el-icon {
  font-size: 17px;
}
.el-pagination >>> .number {
  font-size: 17px;
  width: 60px;
}
.paging {
  margin-top: 30px;
  margin-left: 30%;
}

.el-pager >>> .active {
  color: #39b9ae;
}
.section2 {
  margin-top: 10px;
}
.section1-3 {
  position: absolute;
  right: 0;
}

.form >>> .el-input__inner {
  width: 220px;
}
.el-input >>> .el-input__inner {
  width: 220px;
}
.btn {
  width: 60px;
  height: 35px;
  border: 1px solid #39b9ae;
  color: #39b9ae;
  margin-left: 20px;
  background-color: white;
  outline: none;
}
.btn1 {
  width: 80px;
  background-color: #39b9ae;
  color: white;
  border: none;
}
.btn2 {
  width: 100px;
}
.el-input >>> input:focus {
  outline: none !important;
}
.select {
  border: none;
}
.section1-2 {
  width: 150px;
  margin-left: 30px;
}
.section1-1 {
  width: 190px;
  border-bottom: 1px solid gainsboro;
  display: flex;
  justify-content: center;
  align-items: center;
}
.input1 {
  width: 150px;
  height: 30px;
  border: none;
  margin-left: 10px;
}
.section1-2 >>> .el-input__inner {
  width: 150px;
  height: 35px;
}
input:focus {
  border: none;
  outline: none;
}
.section1 {
  width: 100%;
  height: 50px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  position: relative;
}
.title {
  font-size: 30px;
  margin-top: 20px;
  font-weight: bold;
}
.spe {
  display: inline-block;
  font-size: 15px;
}
.total {
  padding: 10px;
  position: relative;
}

.jixing {
  position: relative;
  top: 0px;
  left: -50px;
}
.guige {
  position: relative;
  top: 0px;
  left: 0px;
}
.bianhao1 {
  position: relative;
  top: 0px;
  left: -50px;
}
.jiage1 {
  position: relative;
  top: 0px;
  left: -50px;
}
.leixing1 {
  position: relative;
  top: 0px;
  left: 0px;
}
.jiage {
  position: relative;
  top: 0px;
  left: -15px;
}
/* .leixing{
     position: relative;
   top: 0px;
   left: -50px;
} */
.shixiao {
  position: relative;
  top: -65px;
  left: 339px;
}
.bieming,
.tybianma {
  position: relative;
  top: 0px;
  left: 30px;
}
.pzwenhao {
  position: relative;
  top: 0px;
  left: 70px;
}
.ypbianhao {
  position: relative;
  top: 0px;
  left: 30px;
}
.leixing {
  position: relative;
  top: 0px;
  left: 28px;
}
.fenlei {
  position: relative;
  top: 0px;
  left: 68px;
}
.btnbtn1 :hover{
color:#39b9ae;
}
.btnbtn2{
  background-color: #39b9ae;
  border:1px solid #39b9ae;
}
body .el-table th.gutter{
display: table-cell!important;
}
.el-upload__tip{
  margin-top: 5%;
  margin-left: 48%;
}
</style>